<template>
    <div>
        <!-- 添加品牌对话框 -->
        <el-dialog :visible.sync="open" title="添加品牌" append-to-body>
        <div class="search">
            <el-input
            v-model="queryParams.brandDesc"
            clearable
            class="filter-item"
            style="width: 200px"
            placeholder="请输入品牌名称"
            />
            <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
            >查找</el-button
            >
            <el-table
            v-loading="loading"
            :data="brandList"
            element-loading-text="正在查询中。。。"
            border
            fit
            highlight-current-row
            ref="listDetail"
            @selection-change="handleSelectionChange"
            @row-dblclick="dblclickSpecificationAdd"
            >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column align="center" label="ID" prop="id" />
            <el-table-column align="center" label="品牌名称" prop="brandDesc" />
            <el-table-column align="center" label="品牌排序" prop="brandSort" />
            
            </el-table>
            <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />
        </div>
        <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取消</el-button>
        <el-button type="primary" @click="handleSpecificationAdd">确定</el-button
        >
      </div>
        </el-dialog>
    </div>
</template>
<script>
import { listBrand } from "@/api/supplier/brand";
export default {
    name: "brand",
    props: {
      brandProps: {
        open: false,
        brandList: [],
      },
      handleSelect: {
        type: Function
      },
      radiobox: true
    },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        brandDesc: null,
        brandLogo: null,
        brandCover: null,
        brandSort: null,
        ids: [],
      },
      open: this.brandProps.open,
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,

      // 选中数组
      ids: [],
      // 品牌表格数据
      brandList: [],
        // 选中的品牌
      checkedBrand: [],
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询品牌列表 */
    getList() {
      this.loading = true;
      listBrand(this.queryParams).then(response => {
        this.brandList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询商品 */
    handleFilter() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //在所有商品中选中对应商品进入订单列表的商品中
    handleSpecificationAdd() {
      this.checkedBrand.forEach((item) => {
        for (let i = 0; i < this.brandList.length; i++) {
          if (this.brandList[i].id === item.id) {

            this.brandList.splice(i, 1);
            this.queryParams.ids.push(item.id);
            break;
          }
        }
      });
     
      this.handleSelect(this.checkedBrand)
      this.checkedBrand = [];

      this.open = false;
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {

      if(!this.radiobox){
        this.checkedBrand = selection;
      }else{
        if(selection.length > 1){
          this.$refs.listDetail.clearSelection()
          this.$refs.listDetail.toggleRowSelection(selection.pop())
        }else{
          this.checkedBrand = selection;
        }  
      }
    },
    dblclickSpecificationAdd(row) {
      this.checkedBrand.push(row);
      this.handleSelect(this.checkedBrand);
      this.checkedBrand = [];

      this.open = false;
    },
  }
}
        
</script>